<template>
    <div class="photo">
        <div class="navtitle">
                <ul>
                    <li class="con"><a href="#">推荐摄影师</a></li>
                    <li><a href="#">热门摄影师</a></li>
                    <li><a href="#">新晋摄影师</a></li>
                    <li><a href="#">签约摄影师</a></li>
                   
                    
                </ul>
        </div>
        <div class="title_head">
            <div class="container">
               <p>个人&公司</p> 
            </div>
        </div>
        <div class="main">
            <div class="container">
                <div class="boxuser">
                    <div v-for="(item,index) in newLists" :key="item.slug" class="author">
                        <div class="left">
                            <div @click="user(item[0].user.slug)" class="headimg">
                                <img :src="item[0].user.avatar.large" alt="" class="auto-img">
                            </div>
                            <div class="info">
                                <div class="top">
                                    <div class="name">{{item[0].user.name}}</div>
                                    <div class="icon">
                                        <img src="../assets/img/China.svg" alt="" class="auto-img">
                                    </div>
                                    <div class="icon">
                                        <img src="../assets/img/pen.svg" alt="" class="auto-img">
                                    </div>
                                    <div class="icon">
                                        <img src="../assets/img/V.svg" alt="" class="auto-img">
                                    </div>
                                    <div class="icon">
                                        <img src="../assets/img/book.svg" alt="" class="auto-img">
                                    </div>
                                </div>
                                <p style="margin-bottom:8px;">中国大陆</p>
                                <div class="data">
                                    <div class="box">
                                        <span>1613</span>
                                        <p>声望</p>
                                    </div>
                                    <div class="box">
                                        <span>{{item[0].favorite_count}}</span>
                                        <p>粉丝</p>
                                    </div>
                                    <div class="box">
                                        <span>{{works[index]}}</span>
                                        <p>作品</p>
                                    </div>
                                </div>
                                <div class="btnbox" @click="follow(item[0].user.slug)">
                                <div class="btn" v-show="!page.care">
                                    关注
                                </div> 
                                <div class="btn con" v-show="page.care">
                                    已关注
                                </div> 

                                </div>
                            </div>
                        </div>
                        <div class="right">
                           
                            <!-- 遍历图片 -->
                            <div class="imagebox"  v-for="(e,i) in item" :key="i"  style="display:flex;">

                            <div class="imgbox back" v-if="i<3" :style="{'background-image':'url('+e.image.large+')'}">
                            </div>
                            <div class="imgbox con" v-if="item.length==2">
                                暂无更多
                            </div>
                            <div class="imgbox con" v-if="item.length<2">
                                暂无更多
                            </div>
                            <div class="imgbox con" v-if="item.length<2">
                                暂无更多
                            </div>
                            </div>
 
                           
                        </div>
                    </div>  
                </div>
                
                
            </div>
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>

import FootNavbar from '@/components/FootNavbar.vue'
import {  getPhoto  } from '../api/photo'
    export default {
        data() {
            return {
                Photo: null,
                newLists:[],
                Photodata:[],
                works:[],
                Lists:[],
                page:[],
                followdata:[]
            };
        },
        components: {  FootNavbar },
        methods:{
            follow(id){
                // 找到当前id所在数组下标的数据
        
                let index = this.Lists.findIndex((item)=>item.user.slug==id);
                let token = window.localStorage.getItem("token");
                this.page=this.Lists[index];
                // 判断是否登录
                if(!token){
                    this.$message('登陆后再试试吧~');
                    this.$router.push("/record")
                    return
                }
                console.log(index);
                if(this.page.care==false){
                    //用户id
                    let id = this.page.user.slug;
                    console.log(id);
                    // 遍历localstory 找到相同用户id发布的所有图文
                    this.Lists.forEach(item => {
                        if (item.user.slug == id) {
                            // 将id用户所有图文详情页的关注状态改变
                            item.care=true;
                            item.favorite_count+=1;
                        }
                    });
                    //去重
                    //寻找收藏数据id是否与当前页面数据id相等 
                    //找不到为-1表示收藏数据中不存在当前页面数据
                    var con=this.followdata.findIndex(item=>item.slug==this.page.slug);
                    if(con==-1){
                        this.followdata.push(this.page);
                        window.localStorage.setItem("followdata",JSON.stringify([this.followdata]));
                    }
                    this.$message.success('关注成功');
                    window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists])); 
                    }else if(this.page.care==true){
                        //用户id
                        // let userid = this.page.user.slug;
                        // 遍历localstory 找到相同用户id发布的所有图文
                        this.Lists.forEach(item => {
                            if (item.user.slug == id) {
                                // 将id用户所有图文详情页的关注状态改变
                                item.care=false;
                                item.favorite_count-=1;
                            }
                        });
                        //当前图文id
                        // let id =this.$route.query.id;
                        // 找到当前id所在数组下标的数据
                        let index = this.followdata.findIndex((item)=>item.slug==id);
                        this.followdata.splice(index,1);
                        window.localStorage.setItem("followdata",JSON.stringify([this.followdata]));
                        this.$message('取消关注');
                        //将数据存入local story中
                        window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
                    }

                
            },
            user(id){
                console.log(id);
                this.$router.push("/user?id="+ id +"");
            },
            getPhotoFun(){
                getPhoto().then(data=>{
                    console.log(data.data);
                    this.Photo=data.data;
                })
                 if(window.localStorage.getItem("newLists")){
                     this.newLists=JSON.parse(window.localStorage.getItem("newLists"));
                }   
                // local story如果存在数据则使用localstory中的数据
                if(window.localStorage.getItem("Listsnew")){
                    this.Lists=JSON.parse(window.localStorage.getItem("Listsnew"))[0];
                }
                if(window.localStorage.getItem("followdata")){
                        this.followdata=JSON.parse(window.localStorage.getItem("followdata"))[0];
                    }
                for(let i =0;i<this.newLists.length;i++){
                    this.works.push(this.newLists[i].length);
                    this.Photodata.push(this.newLists[i][0]);
                }
                console.log(this.newLists);
                console.log(this.Photodata);
                console.log(this.works);
                console.log(this.Lists);
            }
        },
        created(){
            this.getPhotoFun();
        }
        
    }
</script>

<style lang="scss" scoped>
.photo{
    .navtitle {
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 10;
    box-shadow: 0 1px 1px #eee;
    ul {
      display: flex;
      justify-content: center;
      li {
        display: flex;
        align-items: center;
        height: 60px;
        font-weight: bold;
        font-size: 14px;
        margin: 0 15px;
        a {
          color: #999;
          &:hover {
            color: #1088f2;
          }
        }
        &.con {
          border-bottom: 2px solid #1088f2;
          a {
            color: #000;
          }
        }
      }
    }
    }
    .title_head{
        height: 55px;
        background-color: #f7f9fa;
        line-height: 55px;
        p{
            font-size: 14px;
        }
    }
    .main{
        
        .author{
            height: 200px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            .left{
                display: flex;
                width: 50%;
                .headimg{
                    cursor: pointer;
                    width: 96px;
                    height: 96px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .info{
                    margin-left: 24px;
                    .top{
                        display: flex;
                        align-items: center;
                        margin-bottom: 8px;
                        .name{
                            font-size: 16px;
                            font-weight: bold;
                            margin-right: 4px;
                        }
                        .icon{
                            width: 16px;
                            height: 16px;
                            margin-left: 4px;
                        }
                    }
                    p{
                        font-size: 12px;
                        color: #8c8c8c;
                    }
                    .data{
                        display: flex;
                        margin-bottom: 24px;
                        .box{
                            display: flex;
                            margin-right: 8px;
                            span{
                                font-size: 12px;
                                margin-right: 4px;
                            }

                        }
                    }
                    .btn{
                        cursor: pointer;
                        width: 64px;
                        height: 32px;
                        text-align: center;
                        line-height: 32px;
                        font-size: 12px;
                        font-weight: bold;
                        background-color: #1088f2;
                        border-radius: 5px;
                        color: #fff;
                        &:hover{
                        background-color: #1172c7;
                        }
                    }
                    .con{
                        background: #f7f7f7;
                        border: 1px solid #ccc;
                        box-sizing: border-box;
                        color: #b0b0b0;
                        &:hover{
                        background-color: #f7f7f7;
                        }
                    }
                }
            }
            .right{
                display: flex;
                width: 50%;
                overflow: hidden;
                
                // justify-content: space-evenly;
                .imgbox{
                    width: 194px;
                    height: 136px;
                    margin-right: 8px;
                }
                .con{
                    text-align: center;
                    line-height: 136px;
                    font-weight: bold;
                    box-shadow: 0 0 2px #ccc;
                }
                .back{
                    background-size: cover;
                    background-position: 50%;
                }
            }
        }
    }
}
</style>